<template>
  <div class="topbar_container">
    <div class="left_side">
      <h1>叩丁狼电商运营平台</h1>
      <!-- 十四、点击 icon 就隐藏侧边栏 -->
      <!-- 14.3添加点击 icon 事件 -->
      <div class="icon" @click="collapseAsideMenu">
        <!-- 14.1添加小手的css样式 -->
        <el-icon :size="20" color="#fff">
          <Menu />
        </el-icon>
      </div>
    </div>
    <!-- 11.2 右边的下拉菜单，使用 element-plus 里面的 Dropdown 下拉菜单组件 -->
    <div class="right_side">
      <!-- 11.3修改一下代码 -->
      <!-- 11.13 在 element-plus 里面有个 command	点击菜单项触发的事件回调，的方法 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <!-- 右侧用户名 -->
          <!-- 11.12渲染仓库 pinia 的数据 -->
          {{ userStore.userName }}
          <!-- admin -->
          <!-- 下拉箭头图标 -->
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <!-- 下拉显示菜单 -->
        <template #dropdown>
          <el-dropdown-menu>
            <!-- 11.14 添加 command 的属性 -->
            <el-dropdown-item command="home">首页</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Menu, ArrowDown } from '@element-plus/icons-vue';
// @ts-ignore
import { ElMessage } from 'element-plus'

// 11.4我们需要获取到 username 用户名显示到右侧，先导入仓库 pinia
import { useUserStore } from '@/store/UserStore/userStore.ts'

// 11.20定义路由实例
import { useRouter } from 'vue-router'
const router = useRouter();

// 11.29引入文件utils
// import { clearPinia, clearRoutes, logout } from '@/utils/index'
import { logout } from '@/utils/index'

const userStore = useUserStore();

// 14.12导入 asideStore
import { useAsideStore } from '@/store/AsideStore/asideStore'
const asideStore = useAsideStore()

// 11.5因为我们仓库没有定义 username，所以我们要先去到 router 文件夹里面的 index.ts，获取用户的 username

// 11.15定义 handleCommand 点击的事件
const handleCommand = (cmd: string) => {
  // 11.16条件判断
  switch (cmd) {
    case 'home':
      // 路由跳转到首页 /home
      router.push('/home')
      break;
    // 11.17如果是的退出登录 logout
    case 'logout':
      // 11.18提示用户
      ElMessage({
        type: 'success',
        message: '退出成功'
      })

      // 11.44把一下代码(删除token，跳转登录页，清除路由，删除pinia)封装，放到 utils 文件夹里面的 index.ts

      // 11.19删除 token
      // localStorage.removeItem('token')
      // // 11.21跳转登录页
      // router.push('/login')
      // // 11.22清空路由
      // // 11.31去到路由文件 router 文件夹里面的 index.ts
      // // 11.43使用清除路由的方法
      // clearRoutes(router)

      // // 11.23清空pinia
      // // 11.24去到 store 文件夹里面的 UserStore 文件夹里面的 useStore.ts
      // // 11.30使用清空 pinia 的方法
      // clearPinia();

      // 11.51使用封装的 退出登录 logout 的方法
      logout()
      break;
  }
}

// 14.4点击 icon 的方法，然后我们需要操控显隐的话，将数据存到 pinia 里面，去到 store 文件夹里面的 AsideStore 文件夹里面的 AsideStore.ts
const collapseAsideMenu = () => {
  // console.log('点击折叠');
  // 14.13点击的时候修改 显隐 为 false
  // 14.14去到 AsideMenu 文件夹里面的 index.vue
  asideStore.isCollapse = !asideStore.isCollapse
}

</script>

<style lang="less" scoped>
.topbar_container {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left_side {
    display: flex;
    align-items: center;

    h1 {
      line-height: 70px;
      font-size: 24px;
      color: #fff;
      margin-right: 20px;
      font-weight: 400;
    }

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;

      // 14.2鼠标移入小手
      :deep(.el-icon) {
        cursor: pointer;
      }
    }


  }


  .right_side {
    :deep(.el-dropdown-link) {
      color: #fff;
      outline: none;
    }


    :deep(.example-showcase .el-dropdown-link) {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}
</style>